<template>
  <!--  <el-table :data="tableData" style="width: 100%">-->
  <!--    <el-table-column prop="date" v-slot="scord" label="Date" width="180">-->
  <!--      <input @keydown="keyMove(scord,$event)" type="text"-->
  <!--             :ref='`tableData${scord.column.property}${scord.$index}_ref`'-->
  <!--             v-model="tableData[scord.$index][scord.column.property]">-->
  <!--    </el-table-column>-->
  <!--    <el-table-column prop="name" label="Name" v-slot="scord" width="180">-->
  <!--      <input @keydown="keyMove(scord,$event)" type="text"-->
  <!--             :ref='`tableData${scord.column.property}${scord.$index}_ref`'-->
  <!--             v-model="tableData[scord.$index][scord.column.property]">-->
  <!--    </el-table-column>-->
  <!--    <el-table-column prop="address" v-slot="scord" label="Address">-->
  <!--      <input @keydown="keyMove(scord,$event)"-->
  <!--             :ref='`tableData${scord.column.property}${scord.$index}_ref`'-->
  <!--             v-model="tableData[scord.$index][scord.column.property]">-->
  <!--    </el-table-column>-->
  <!--  </el-table>-->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180">
      <template #default="scope">
        <el-input :id="'tableData' + scope.column.property + scope.$index + '_ref'"
                  @keydown="keyMove(scope, $event)" v-model.number="scope.row.date" :min="0"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Name" width="180">
      <template #default="scope">
        <el-input :id="'tableData' + scope.column.property + scope.$index + '_ref'"
                  @keydown="keyMove(scope, $event)" v-model.number="scope.row.name" :min="0"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="Address"/>
  </el-table>
</template>

<script setup>
import {ref} from "vue";

const inputRef = ref();
const tableData = [
  {
    date: '2016-05-031',
    name: 'Tom',
    address: [1, 2, 3, 4, 5],
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: [1, 2, 3, 4, 5],
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: [1, 2, 3, 4, 5],
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: [1, 2, 3, 4, 5],
  },
];

const keyMove = (scope, event) => {
  if (event.keyCode === 38 || event.keyCode === 40) {
    moveFunc(tableData, scope, event.keyCode);
  }
};
const moveFunc = (num, scope, keyCode) => {
  console.log(scope);
  let row = scope.row;
  let property = scope.column.property;
  let obj = Object.keys(row);
  let index = obj.indexOf(property);
  let dataIndex = scope.$index;
  let refName;
  switch (keyCode) {
    case 38: // 上箭头
      refName = `tableData${obj[index]}${dataIndex - 1}_ref`
      break;
    case 40: // 下箭头
      refName = `tableData${obj[index]}${dataIndex + 1}_ref`
      break
  }
  const input = document.getElementById(refName);
  if (!input) return;
  input.focus();
};
// export default {
//   data() {
//     return {
//       tableData
//     }
//   },
//   methods: {
//     keyMove(scord, event) {
//       console.log(scord, event);
//       // if (event.ctrlKey) {
//       //   this.moveFouce(tableData, scord, event.keyCode)
//       // }
//     },
//     moveFouce(num, scord, keyCode) {
//       var that = this.$refs
//       var row = scord.row
//       var property = scord.column.property
//       var obj = Object.keys(row)
//       var index = obj.indexOf(property)
//       var dataIndex = scord.$index
//       var refName
//       switch (keyCode) {
//         case 37: // 左箭头
//           refName = `tableData${obj[index - 1]}${dataIndex}_ref`
//           break
//         case 38: // 上箭头
//           refName = `tableData${obj[index]}${dataIndex - 1}_ref`
//           break
//         case 39: // 右箭头
//           refName = `tableData${obj[index + 1]}${dataIndex}_ref`
//           break
//         case 40: // 下箭头
//           refName = `tableData${obj[index]}${dataIndex + 1}_ref`
//           break
//       }
//       if (!refName) return
//       that[refName].focus()
//     }
//   }
// }
</script>

